<template>
	<view>
		<view class="header-box">
			<view :style="{height: height + 'px'}" style="background: #fff"></view>
			<view class="header" :style="[navbarInnerStyle]">
				<view class="tabs">
					<view class="tabs-son" @click="changeTabs(1)">
						<text :style="{color: tabIndex === 1 ? '#3C7EFF' : '#666666'}">巡检列表</text>
						<view class="botton-tab" v-if="tabIndex === 1">
							<view class="botton-tab-son"></view>
						</view>
					</view>
					<view class="tabs-son" @click="changeTabs(2)">
						<text :style="{color: tabIndex === 2 ? '#3C7EFF' : '#666666'}">报修列表</text>
						<view class="botton-tab" v-if="tabIndex === 2">
							<view class="botton-tab-son"></view>
						</view>
					</view>
					<view class="tabs-son" @click="changeTabs(3)">
						<text :style="{color: tabIndex === 3 ? '#3C7EFF' : '#666666'}">零散报修</text>
						<view class="botton-tab" v-if="tabIndex === 3">
							<view class="botton-tab-son"></view>
						</view>
					</view>
				</view>
				<!-- <u-search placeholder="搜索工单编号" v-model="keyword" :show-action="false"></u-search> -->
			</view>
		</view>
		<view class="u-navbar-placeholder" :style="{ width: '100%', height: Number(navbarHeight) + height + 'px' }"></view>
		
		<view class="page-content">
			<view class="tabs-box">
				<view class="title-tabs">
					<view v-for="(item, index) in btnArr" :key="index" :class="btnIndex === index ? 'tabs-btns tabs-active' : 'tabs-btns'" @click="changeStateHander(index)">
						<text>{{ item.name }}</text>
						<text>{{ item.value }}</text>
					</view>
				</view>
				<scroll-view class="scroll-list" scroll-y="true" v-if="listData.length">
					<view class="list-box" v-if="tabIndex === 1 && tabIndex === 2">
						<view class="list-box-cell" v-for="(item, index) in listData" :key="index">
							<view class="list-cell-header">
								<view class="list-header-left">
									<view class="round-big"></view>
									<text class="header-num">{{item.id}}</text>
									<text class="header-btn" v-if="changeReStatus(item.statusText)">{{changeReStatus(item.statusText)}}</text>
								</view>
								<view class="list-header-right">
									<view class="round-small"></view>
									<text>{{changeStatus(item.status)}}</text>
								</view>
							</view>
							<view class="list-cell-body">
								<image src="/static/icon-device.png" mode="" class="left-image"></image>
								<view class="list-info">
									<view class="list-li">
										<view class="list-view">
											<view class="list-son">
												<image src="/static/icon-phone.png" mode=""></image>
												<text>维修人员：{{item.repairPerson}}</text>
											</view>
											<text class="deviceName">{{item.equipmentName}}</text>
										</view>
									</view>
									<view class="list-li">
										<image src="/static/icon-phone.png" mode=""></image>
										<text>维修人员电话：{{item.repairPersonPhone}}</text>
									</view>
									<view class="list-li">
										<image src="/static/icon-time.png" mode=""></image>
										<text>发布时间：{{item.createTime}}</text>
									</view>
									<view class="list-li">
										<image src="/static/icon-time.png" mode=""></image>
										<text>截止时间：{{item.endDate}}</text>
									</view>
								</view>
							</view>
							<view class="list-cell-footer">
								<!-- <text>{{item.equipmentName}}</text> -->
								<view class="btns">
									<view
										class="extension"
										v-if="item.status !== 1 && item.status3 === null && item.status2 !== 0 && item.status4 !== 0"
										@click="navTo(`/pages/work/apply-deferment?id=${item.id}&tabIndex=${tabIndex}`)"
									>申请延期</view>
									<view
										class="extension"
										v-if="item.status !== 1 && item.status4 === null && item.status2 !== 0 && item.status3 !== 0"
										@click="navTo(`/pages/work/work-turn?id=${item.id}&tabIndex=${tabIndex}`)"
									>申请转单</view>
									<view
										class="extension"
										v-if="item.status !== 1 && item.status2 === null && item.status3 !== 0 && item.status4 !== 0"
										@click="navTo(`/pages/work/work-back?id=${item.id}&tabIndex=${tabIndex}`)"
									>申请退单</view>
									<view
										class="handle"
										v-if="item.status !== 1 && item.status2 !== 2 && item.status2 !== 0 && item.status3 !== 0 && item.status4 !== 0"
										@click="navTo(`/pages/work/work-handle?id=${item.id}&tabIndex=${tabIndex}`)"
									>处理</view>
								</view>
							</view>
						</view>
					</view>
					<view class="list-box" v-else>
						<view class="list-box-cell" v-for="(item, index) in listData" :key="index">
							<view class="list-cell-header">
								<view class="list-header-left">
									<view class="round-big"></view>
									<text class="header-num">{{item.id}}</text>
									<text class="header-btn" v-if="changeReStatus(item.statusText)">{{changeReStatus(item.statusText)}}</text>
								</view>
								<view class="list-header-right">
									<view class="round-small"></view>
									<text>{{changeStatus(item.status)}}</text>
								</view>
							</view>
							<view class="list-cell-body">
								<image src="/static/icon-device.png" mode="" class="left-image"></image>
								<view class="list-info">
									<view class="list-li">
										<image src="/static/icon-phone.png" mode=""></image>
										<text>维修项目：{{item.project}}</text>
									</view>
									<view class="list-li">
										<view class="list-view">
											<view class="list-son">
												<image src="/static/icon-phone.png" mode=""></image>
												<text>维修人员：{{item.repairPerson}}</text>
											</view>
										</view>
									</view>
									<view class="list-li">
										<image src="/static/icon-phone.png" mode=""></image>
										<text>维修人员电话：{{item.repairPersonPhone}}</text>
									</view>
									<view class="list-li">
										<image src="/static/icon-time.png" mode=""></image>
										<text>发布时间：{{item.createTime}}</text>
									</view>
									<!-- <view class="list-li">
										<image src="/static/icon-time.png" mode=""></image>
										<text>截止时间：{{item.endDate}}</text>
									</view> -->
								</view>
							</view>
							<view class="list-cell-footer">
								<!-- <text>{{item.equipmentName}}</text> -->
								<view class="btns">
									<view
										class="extension"
										v-if="item.status !== 1 && item.status3 === null && item.status2 !== 0 && item.status4 !== 0"
										@click="navTo(`/pages/work/apply-deferment?id=${item.id}&tabIndex=${tabIndex}`)"
									>申请延期</view>
									<view
										class="extension"
										v-if="item.status !== 1 && item.status4 === null && item.status2 !== 0 && item.status3 !== 0"
										@click="navTo(`/pages/work/work-turn?id=${item.id}&tabIndex=${tabIndex}`)"
									>申请转单</view>
									<view
										class="extension"
										v-if="item.status !== 1 && item.status2 === null && item.status3 !== 0 && item.status4 !== 0"
										@click="navTo(`/pages/work/work-back?id=${item.id}&tabIndex=${tabIndex}`)"
									>申请退单</view>
									<view
										class="handle"
										v-if="item.status !== 1 && item.status2 !== 2 && item.status2 !== 0 && item.status3 !== 0 && item.status4 !== 0"
										@click="statusChangeHandler(item.id)"
									>处理</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view >
				<view class="project-list" v-else>
					<view class="no-list">
						<image src="/static/icon-null-page.png" mode=""></image>
						<text>暂无资源哦～</text>
					</view>
				</view>
			</view>
		</view>
		<plus-actionsheet></plus-actionsheet>
	</view>
</template>

<script>
	import plusActionsheet from '../common/dialog.vue'
	let systemInfo = uni.getSystemInfoSync();
	export default {
		components: {
			plusActionsheet
		},
		data() {
			return {
				tabIndex: 1,
				btnIndex: 0,
				range: [
					{ value: 0, text: "记住用户名" },
					{ value: 1, text: "记住密码" }
				],
				deptId: '',
				height: systemInfo.statusBarHeight,
				keyword: '',
				btnArr: [
					{ name: '全部', value: 10 },
					{ name: '待处理', value: 4 },
					{ name: '已完成', value: 3 },
					{ name: '延期', value: 2 },
					{ name: '超时', value: 1 }
				],
				listData: []
			}
		},
		computed: {
			// 导航栏内部盒子的样式
			navbarInnerStyle() {
				let style = {};
				// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
				style.height = this.navbarHeight + 'px';
				// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
				// #ifdef MP
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.marginRight = rightButtonWidth + 'px';
				// #endif
				return style;
			},
			// 转换字符数值为真正的数值
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 44;
				// #endif
				// #ifdef MP
				// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
				// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
				// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height;
				// #endif
			}
		},
		onShow() {
			if (this.tabIndex === 1) {
				this.getList()
			} else if(this.tabIndex === 2) {
				this.repairHandleList()
			} else {
				this.reportHandleList()
			}
		},
		methods: {
			getList() {
				this.$u.api.patrolList({deptId: this.$store.state.vuex_user.deptId}).then(res => {
					console.log(res)
					if (!res.rows.length) return this.listData = []
					this.listData = res.rows
				})
			},
			repairHandleList() {
				this.$u.api.repairList({deptId: this.$store.state.vuex_user.deptId}).then(res => {
					if (!res.rows.length) return this.listData = []
					this.listData = res.rows
				})
			},
			reportHandleList() {
				this.$u.api.reportList({deptId: this.$store.state.vuex_user.deptId}).then(res => {
					if (!res.rows.length) return this.listData = []
					this.listData = res.rows
				})
			},
			changeStatus(val) {
				let str = ''
				switch(val) {
					case 0:
						str = '待处理'; break;
					case 1:
						str = '已处理'; break;
					default: break;
				}
				return str
			},
			changeReStatus(val) {
				if (!val) return
				let arr = JSON.parse(val)
				let obj = arr[arr.length - 1]
				if (obj.statusType === 2) {
					if (obj.status === 0) {
						return '申请退单'
					}
					if (obj.status === 1) {
						return '拒绝退单'
					}
					if (obj.status === 2) {
						return '同意退单'
					}
				}
				if (obj.statusType === 3) {
					if (obj.status === 0) {
						return '申请延期'
					}
					if (obj.status === 1) {
						return '拒绝延期'
					}
					if (obj.status === 2) {
						return '同意延期'
					}
				}
				if (obj.statusType === 4) {
					if (obj.status === 0) {
						return '申请转单'
					}
					if (obj.status === 1) {
						return '拒绝转单'
					}
					if (obj.status === 2) {
						return '同意转单'
					}
				}
			},
			// 点击底部导航栏清除页面状态
			onTabItemTap() {
				if (this.$store.state.vuex_stata) {
					this.$store.state.vuex_stata = false
				}
			},
			change(e) {
				console.log(e)
			},
			changeTabs(num) {
				this.tabIndex = num
				if (this.tabIndex === 1) {
					this.getList()
				} else if(this.tabIndex === 2) {
					this.repairHandleList()
				} else {
					this.reportHandleList()
				}
			},
			
			// 切换数据状态
			changeStateHander(index) {
				console.log(index, '切换数据状态')
				this.btnIndex = index
			},
			statusChangeHandler(id) {
				if (this.tabIndex === 3) {
					this.navTo(`/pages/work/scattered?id=${id}&tabIndex=${this.tabIndex}`)
				} else {
					this.navTo(`/pages/work/work-handle?id=${id}&tabIndex=${this.tabIndex}`)
				}
			},
			// 跳转处理工单
			navTo(href) {
				uni.navigateTo({
					url: href
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.project-list {
		height: calc(100vh - var(--window-top) - var(--window-bottom) - 88rpx - 110rpx);
		background: #fff;
		.no-list {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 30%;
			left: 50%;
			transform: translate(-50%, -50%);
			image {
				width: 192rpx;
				height: 172rpx;
			}
			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #999999;
				line-height: 48rpx;
				text-align: center;
				font-style: normal;
			}
		}
	}
	.header-box {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 991;
	}
	.header {
		padding: 30rpx;
		display: flex;
		align-items: center;
		background: #fff;
		
		z-index: 100000;
		.tabs {
			display: flex;
			.tabs-son {
				margin-right: 48rpx;
				position: relative;
				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #666666;
					line-height: 48rpx;
					text-align: center;
					font-style: normal;
				}
				.botton-tab {
					position: absolute;
					bottom: -12rpx;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 32rpx;
					height: 12rpx;
					border-radius: 50%;
					background: #3C7EFF;
					.botton-tab-son {
						position: absolute;
						bottom: 0px;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 24rpx;
						height: 10rpx;
						border-radius: 50%;
						background: #fff;
					}
				}
			}
		}
	}
	.page-content {
		width: 100%;
		background: #F8F8F8;
		.title-tabs {
			width: 100%;
			white-space: nowrap;
			overflow-x: scroll;
			display: flex;
			padding: 30rpx 24rpx;
			.tabs-btns {
				width: 140rpx;
				height: 50rpx;
				flex: 0 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #fff;
				border-radius: 30rpx;
				margin-right: 20rpx;
				&:last-child {
					margin: 0;
				}
				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					text-align: left;
					font-style: normal;
					&:first-child {
						color: #666;
					}
					&:last-child {
						color: #999;
					}
				}
				text:last-child {
					margin-left: 16rpx;
				}
			}
			.tabs-active {
				background: linear-gradient( 270deg, #6FB5FF 0%, #3C7EFF 100%);
				text {
					color: #fff !important;
				}
			}
		}
		.list-box {
			padding: 0 30rpx 30rpx 30rpx;
			.list-box-cell {
				width: 100%;
				height: 370rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 24rpx 30rpx;
				margin-bottom: 16rpx;
				&:last-child {
					margin: 0;
				}
				.list-cell-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 20rpx;
					border-bottom: 1px solid rgba(0,0,0,0.1); 
					.list-header-left {
						display: flex;
						align-items: center;
						.round-big {
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							background: limegreen;
							margin-right: 8rpx;
						}
						.header-num {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 14px;
							color: #333333;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
							margin-right: 20rpx;
						}
						.header-btn {
							display: block;
							padding: 0 16rpx;
							height: 38rpx;
							background: #F2F2F2;
							border-radius: 8rpx;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #666666;
							line-height: 38rpx;
							text-align: center;
							font-style: normal;
						}
					}
					.list-header-right {
						display: flex;
						align-items: center;
						.round-small {
							width: 16rpx;
							height: 16rpx;
							background: rgba(0,0,0,0.15);
							border-radius: 50%;
							margin-right: 16rpx;
						}
						text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 14px;
							color: rgba(0,0,0,0.65);
							line-height: 14px;
							text-align: right;
							font-style: normal;
						}
					}
				}
				.list-cell-body {
					margin-top: 32rpx;
					display: flex;
					.left-image {
						width: 112rpx;
						height: 112rpx;
						margin-right: 24rpx;
					}
					.list-info {
						flex: 1;
						.list-li {
							display: flex;
							align-items: center;
							line-height: 1;
							margin-bottom: 12rpx;
							white-space: nowrap; /* 确保文本在一行内显示 */
							overflow: hidden; /* 隐藏溢出的内容 */
							text-overflow: ellipsis;
							.list-view {
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								.list-son {
									display: flex;
									align-items: center;
								}
							}
							.deviceName {
								font-size: 28rpx;
								color: #333333;
							}
							image {
								width: 32rpx;
								height: 32rpx;
								margin-right: 8rpx;
							}
							.uni-text {
								width: 100%;
								display: inline-block;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 12px;
								color: #666666;
								line-height: 12px;
								text-align: left;
								font-style: normal;
								
							}
						}
					}
				}
				.list-cell-footer {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 14px;
						color: #333333;
						line-height: 14px;
						text-align: left;
						font-style: normal;
					}
					.btns {
						display: flex;
						align-items: center;
						justify-content: space-between;
						.extension {
							width: 128rpx;
							height: 48rpx;
							border-radius: 8rpx;
							border: 1px solid #C7C7C7;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 48rpx;
							text-align: center;
							font-style: normal;
							margin-right: 24rpx;
						}
						.handle {
							width: 128rpx;
							height: 48rpx;
							border-radius: 8rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							background: #3C7EFF;
							color: #FFFFFF;
							line-height: 48rpx;
							text-align: center;
							font-style: normal;
						}
					}
				}
			}
		}
	}
</style>
